import React, { useEffect, useState } from 'react';
import '../../styles/Allocate/AllocateManage.scss'
import { Input, Button, DatePicker, Space, Table, Select, Upload } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { Allocate_Audit } from "../../utils/api/index";
import { useNavigate } from 'react-router-dom';
const { RangePicker } = DatePicker;
interface Props {

}
interface DataType {
    key: React.Key;
    tracking1: number;
    people1: string;
    diaochu1: string;
    diaoru1: string;
    shenqing1: string;
    shenhetime1: string;
    outbound1: string;
    ruku1: string;
    Human: string;
    shenhe1: string;
    transfer1: string;
}

function AllocateList(props: Props) {
    const columns: ColumnsType<DataType> = [
        {
            title: '调拨单号',
            dataIndex: 'tracking1',

        },
        {
            title: '操作人员',
            dataIndex: 'people1',

        },
        {
            title: '出库仓库',
            dataIndex: 'diaochu1',
        },
        {
            title: '入库仓库',
            dataIndex: 'diaoru1',
        },
        {
            title: '申请调拨单单时间',
            dataIndex: 'shenqing1',
        },
        {
            title: '出库时间',
            dataIndex: 'outbound1',
        },
        {
            title: '入库时间',
            dataIndex: 'ruku1',
        },
        {
            title: '审核人员',
            dataIndex: 'Human',
        },
        {
            title: '审核时间',
            dataIndex: 'shenhe1',
        },
        {
            title: '审核状态',
            dataIndex: 'transfer1',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => {
                        edit(record);
                    }}>编辑</a>
                    <a onClick={() => {
                        details(record);
                    }}>详情</a>
                </Space>
            ),
        },
    ];
    var navigator = useNavigate()
    //编辑
    var edit = function (cs: any) {
        navigator('/index/home/Edit', { state: cs })
    }
    //详情
    var details = function (cs: any) {
        navigator('/index/home/Details', { state: cs })
    }
    var [allocateManage, setallocateManage] = useState([]);
    useEffect(() => {
        //调拨列表页渲染
        Allocate_Audit().then((res) => {
            console.log(res.data);
            setallocateManage(res.data)
        })
    }, [])

    return (
        <div className='AllocateList'>
            <div className='top'>  仓储管理 / 调拨单管理 / 调拨单列表</div>
            <div className='input'>
                {/* 输入框 */}
                <Input placeholder="请输入单号" />
                <Input placeholder="请选择仓库" />
                <Input placeholder="请选择盘点人员" />
                {/* 日期选项 */}
                <Space direction="vertical" size={12} >
                    <RangePicker />
                </Space>
                <Select
                    // defaultValue="lucy"
                    style={{ width: 120 }}
                    placeholder="请选择状态"
                    options={[
                        {
                            value: '进行中',
                            label: '进行中',
                        },
                        {
                            value: '已结束',
                            label: '已结束',
                        },

                    ]}
                />
                {/* <Input placeholder="请选择状态" /> */}
                <Button type="primary">搜索</Button>
                <Button type="primary">创建</Button>
                <Upload {...props}>
                    <Button className='daochu'>导出</Button>
                </Upload>
            </div>
            <div className='center'>
                <Table columns={columns} dataSource={allocateManage} className="table" />
            </div>
        </div>


    );
}

export default AllocateList;